<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    使用script引入VUE-->
    <script src="../js/vue.js"></script>
    <!--  注意：
        一个Vue实例只能关联一个一个容器，
        一个容器只能有一个Vue实例相对应
      -->
</head>
<body>
<!--容器内容-->
<div id="root">
    <h1>{{hello}}</h1>
</div>
<!--<div id="root">-->
<!--    <h1>{{hello}}</h1>-->
<!--</div>-->
<script>
    //阻止vue再启动时生成生产提示
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器
        data(){//data用于存放数据 数据将提供给容器进行使用
            return {
                hello:'Hello World'
            }
        }
    })
</script>
</body>
</html>